<template>
  <div id="app">

    <h2>---------App内容: modules内容---------</h2>
    <p>{{$store.state.a.name}}</p>
    <p>{{$store.getters.fullname}}</p>
    <p>{{$store.getters.fullname1}}</p>
    <p>{{$store.getters.fullname2}}</p>
    <button @click="updateName('Mr.li')">修改名字</button>
    <button @click="asyncUpdateName">异步修改名字</button>


    <h2>---------App内容: info对象中的数据是否为响应式---------</h2>
    <p>{{$store.state.info}}</p>
    <button @click="updateInfo('chen')">更新信息</button>

    <h2>---------App内容---------</h2>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">增加学生</button>
    


    <h2>---------App内容: getters信息---------</h2>
    <p>counter平方：<br>{{$store.getters.powerCounter}}</p>
    <p>学生大于20: <br>{{$store.getters.more20stu}}</p>
    <p>学生个数: <br>{{$store.getters.more20stuLength}}</p>
    <p>学生自定义过滤: <br>{{$store.getters.moreAgeStu(8)}}</p>

    


    <h2>------Hello Vuex内容------</h2>
    <hello-vuex :counter="counter">

    </hello-vuex>
  </div>
</template>

<script>
  import HelloVuex from './components/HelloVuex'
  import {
    INCREMENT
  } from './store/mutations-types'

  export default {
    name: 'App',
    // 组件注册
    components: {
      HelloVuex
    },
    data() {
      return {
        message: "my name is chen",
        counter: 0
      }
    },

    computed: {
    },
    methods: {
      addition() {
        // 提交到 store 中的 mutations方法中，并将调用函数名称作为参数一并传递
        this.$store.commit(INCREMENT)
      },
      subtraction() {
        this.$store.commit('decrement')
      },
      addCount(count) {
        // 1. 普通提交
        // this.$store.commit('incrementCount', count)

        // 2. 特殊的提交冯庄头
        this.$store.commit({
          type: 'incrementCount',
          count
        })
      },
      addStudent() {
        const stu = {id: 114, name: 'curry', age: 50}
        this.$store.commit('addStudent', stu)
      },
      updateInfo(name) {
        // this.$store.commit({
        //   type: 'updateInfo',
        //   name
        // })

        // 1. 使用函数接收内部完成信息
        // this.$store.dispatch('aUpdateInfo', {
        //   name,
        //   success: () => {
        //     console.log("内部操作已完成")
        //   }
        // })

        // 2. 优雅的方式完成
        this.$store
          .dispatch('aUpdateInfo', name)
          .then(res => {
            console.log("提交完成", res)
          })
      },
      updateName(name) {
        this.$store.commit('updateName', name)
      },
      asyncUpdateName() {
        this.$store.dispatch('aUpdateName')
      }
    }
  }
</script>

<style>
</style>
